require("../css/commCss/normalize.less");
require("../css/commCss/reset.less");
require("../css/commCss/property.less");
require("../css/commCss/basic.less");
require("../fonts/iconfont.css");
require("../css/introduction.less");

//axios
const axios = require("axios");

document.addEventListener("DOMContentLoaded", function () {
  /* 获取元素 */
  const videoIcon = document.querySelector("#videoIcon"); //video-i
  const videoUrl = document.querySelector("#videoUrl"); //video
  const video = document.querySelector("video");
  const name = document.querySelector("#name"); //小标题
  const calorie = document.querySelector("#calorie"); //千卡
  const time = document.querySelector("#time"); //分钟
  const peoplenum = document.querySelector("#peoplenum"); //人数
  const imgurl = document.querySelector("#imgurl"); //头像图片
  const desc = document.querySelector("#desc"); //课程详情
  const frequency = document.querySelector("#frequency"); //次数
  const instrument = document.querySelector("#instrument"); //器械
  const userBtn = document.querySelector("#userBtn"); //关注
  const btn = document.querySelector(".btn"); //训练按钮

  //1.页面接收参数cid
  let cid = sessionStorage.cid;

  //2.点击videoIcon 返回上一个页面
  videoIcon.addEventListener("click", function () {
    history.go(-1);
  });

  //3.渲染标题course数据
  axios.get("http://139.9.177.51:8099/sports/courseDetail?id=" + cid)
    .then(function (res) {
      let data = res.data.data;
      console.log(data);

      //获取video路径
      let videos = "http://139.9.177.51:8099" + data.fragments[0].videoUrl;
      //把视频信息存储到会话存储中
      sessionStorage.fragments = JSON.stringify(data.fragments);

      /* 渲染video */
      videoUrl.src = videos;
      //播放或暂停video,videoIcon隐藏显示自己
      video.addEventListener("play", function () {
        videoIcon.style.display = "none";
      });
      video.addEventListener("pause", function () {
        videoIcon.style.display = "block";
      });

      /* 渲染标题--name */
      name.textContent = data.name;

      /* 渲染千卡--calorie */
      calorie.textContent = data.calorie;

      /* 渲染分钟--time */
      time.textContent = data.time;

      /* 渲染人数--peoplenum */
      peoplenum.textContent = data.peoplenum;

      /* 渲染头像图片--peoplenum */
      imgurl.src = "http://139.9.177.51:8099" + data.imgurl;

      /* 渲染课程介绍--desc */
      desc.textContent = data.desc;

      /* 渲染次数--frequency */
      frequency.textContent = data.frequency;

      /* 渲染器械--instrument */
      instrument.textContent = data.instrument;
    });

  let flag = true;
  //4.点击关注userBtn--改变为已关注
  userBtn.addEventListener("click", function () {
    if (flag) {
      userBtn.value = "已关注";
    } else {
      userBtn.value = "+关注";
    }
    flag = !flag;
  });

  //点击开始训练，跳转页面
  btn.addEventListener("click", function () {
    location.href = "./train.html";
  });
});
